<template>
	<view class="list-page qxlj_back4">
		<view class="list-item" v-for="(item,index) in list" :key="index">
			<view class="user-info">
				<view class="headImg">
					<image :src="item.HeadImg" mode=""></image>
				</view>
				<view class="info">
					<view class="name item">{{item.UserName}}</view>
					<view class="time item">{{item.AddTime}}</view>
				</view>
			</view>
			<view class="rate">
				<text>商品评分：{{item.GoodsGrade}}</text><text style="margin-left: 30rpx;">服务评分：{{item.LogisticsScore}}</text>
			</view>
			<view class="content">
				{{item.Message}}
			</view>
			<view class="img-box" v-if="item.ImgList">
				<view class="img-item" v-for="(imgItem,imgIndex) in item.ImgList.split('|')" :key="imgIndex">
					<view class="img-wap">
						<image :src="imgItem" mode="aspectFill" @click="previewImg(imgItem)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<empty v-if="list.length === 0 && loadingType === 'nomore'" :isfiexd="true"  title="没有找到相关消息"></empty>
		<uni-load-more v-else :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import { getProductEvaluations } from '@/api/mall.js'
	import empty from '@/components/empty.vue'
	import GoodsList from '@/components/goods-list.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components:{
			uniLoadMore,
			empty,
			GoodsList
		},
		data() {
			return {
				Id:0,
				page:1, //页数
				loadingType: 'more', //加载更多状态
				list:[]
			}
		},
		onLoad(e) {
			this.Id = e.Id 
			
			if(!e.Id) {
				this.loadingType = 'nomore'
				return
			}
			
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: {
			async loadData(type='add', loading) {
				try{
					if(type === 'add'){
						if(this.loadingType === 'nomore'){
							return;
						}
						this.loadingType = 'loading';
					} else if (type === 'refresh') {
						this.page = 1
						this.loadingType = 'loading';
					} else{
						this.loadingType = 'more'
					}
					
					let { Data,Total } = await getProductEvaluations({Index:this.page,Size:10,Id:this.Id})
					let list = Data
					if(type === 'refresh'){
						this.list = [];
					}
					console.log(6666666,Data)
					this.list = this.list.concat(list)
					//判断是否还有下一页，有是more并且页数加1  没有是nomore
					if(this.list.length<Total) {
						this.loadingType = 'more'
						this.page++
					} else {
						this.loadingType = 'nomore'
					}
					if(type === 'refresh') {
						if(loading == 1) {
							uni.hideLoading()
						} else {
							uni.stopPullDownRefresh()
						}
					}
				}catch(e){	
					this.loadingType = 'nomore'
					//TODO handle the exception
				}
			},
			handleGoToDetail() {
				
			},
			async handleBtnClick(text) {
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				try{
					await cancelProductCollection({
						Id: text.Id
					})
					this.$api.msg('删除成功')
					this.loadData('refresh')
					uni.hideLoading()
				}catch(e){
					uni.hideLoading()
					//TODO handle the exception
				}
				
			},
			// 点击放大图片
			previewImg(e){
				uni.previewImage({
				    urls: [e],
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-page {
		min-height: 100vh;
		background: #E9E9E9;
		padding: 30rpx;
	}
	.list-item {
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.user-info {
			display: flex;
			.headImg {
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
			.info {
				padding: 10rpx 20rpx;
				.item {
					@include overEllipsisOne
				}
				.name {
					font-size: $uni-font-size-base;
				}
				.time {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}
		}
		.rate {
			padding: 20rpx 0 ;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			border-bottom: 1px solid #eee;
		}
		.content {
			padding: 20rpx 0 ;
		}
		
		.img-box {
			display: flex;
			.img-item {
				width: 32%;
			}
			.img-wap {
				padding-bottom: 100%;
				position: relative;
				image {
					position: absolute;
					top: 2%;
					left: 2%;
					width: 96%;
					height: 96%;
				}
			}
			
			
		}
 		
	}
</style>
